<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../public/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--  
            计算属性有缓存，重复使用的情况下只执行一次即可；
            重复使用 " methods " 时，每次都会重新执行其中的方法； 
        -->
        <!-- ①：使用方法处理数据 -->
        <h1>总价是：{{getSum()}} </h1>
        <!-- ②：使用计算属性处理数据 -->
        <h1>总价是：{{price}} </h1>
    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data(){
                return {
                    books:[
                        {id:'001', name:'前端', price: 159},
                        {id:'002', name:'后端', price: 259},
                        {id:'003', name:'数据库', price: 359},
                    ]
                }
            },
            methods:{
                getSum() {
                    let sumP = 0;
                    for (const item of this.books) {
                        sumP += item.price;
                    }
                    return sumP
                }
            },
            // 计算属性
            computed:{
                price() {
                    let sumP = 0;
                    for (const item of this.books) {
                        sumP += item.price;
                    }
                    return sumP
                }
            }
        })
        
    </script>
</body>
</html>